<template>
  <div class="my-case">
    <el-dialog title="用例引用" :visible.sync="dialogVisble" :before-close="handleClose"
               :close-on-click-modal=false :fullscreen="true">
      <index @closeDialog="handleClose" @referenceCase="referenceCase">
        <!--        <el-button slot='slot2' type="text" @click="referenceCase(scope.row)">引用</el-button>-->
      </index>
    </el-dialog>
  </div>

</template>

<script>
import NodeTree from "@/components/Tree/index";
import Pagination from "@/components/Pagination/index";
import {guid} from '@/utils/util'
import index from "../scene/index";


export default {
  name: "caseDialog",
  components: {NodeTree, Pagination, index},
  props: {
    dialogVisble: {
      type: Boolean,
      default: false
    },
    caseTitle: {
      type: String,
      default: "用例引用"
    },
    order: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      queryParams: {
        name: "",
        level: "",
        createUser: "",
        description: ""
      },
      projectId: window.sessionStorage.getItem("projectId"),
      treeNodes: [],
      tableData: [],
      total: 0,
      query: {
        keywords: "",
        pageRow: 10,
        pageNum: 1,
        projectId: sessionStorage.getItem("projectId")
      },
    }
  },
  mounted() {
    this.getTreeNode();
  },
  methods: {
    restList() {
      this.query.pageNum = 1;
      this.getCaseList();
    },
    refresh(queryForm) {
      this.$refs[queryForm].resetFields();
      this.getCaseList();
    },
    handleClose() {
      this.$emit("closeDialog");
    },
    getTreeNode() {
      this.api({
        url: `/getSceneTree/${this.projectId}`,
        method: "get"
      }).then(resp => {
        this.treeNodes = resp.list;
      });
    },
    nodeSelectEvent(data, nodeIds, pNodes) {
      this.query["sceneId"] = nodeIds;
      const loading = this.$loading({
        lock: true, // lock的修改符--默认是false
        text: 'Loading', // 显示在加载图标下方的加载文案
        spinner: 'el-icon-loading', // 自定义加载图标类名
        background: 'rgba(0, 0, 0, 0.1)', // 遮罩层颜色
        target: document.querySelector('#table')//loading覆盖的dom元素节点
      })
      this.getCaseList();
      loading.close()
    },
    getCaseList() {
      this.api({
        url: "/getCaseList",
        method: "post",
        data: this.query
      }).then(resp => {
        this.tableData = resp.list;
        this.total = resp.totalCount;
      });
    },
    referenceCase(data) {
      console.log("引用的用例=", data)
      if (this.$route.path === "/ui/planCu") {
        data["caseId"] = data.id
        this.$emit("referenceData", data);
      } else {
        let id = guid();
        let lists = JSON.parse(data.steps)
        lists.forEach((item) => {
          item.parent_id = id
          // item.caseName = data.sceneName + " / " + data.name
          item.caseName = data.name
        })
        let arr = [{
          id: id,
          optName: "引用用例",
          parent_id: 0,
          // stepName: data.sceneName + " / " + data.name,
          stepName: data.name,
          order: this.order,
          children: lists,
          caseId: data.id
        }]
        this.$emit("referenceData", arr);
      }
      // this.$emit("closeDialog");
    }
  }
}
</script>

<style lang="scss">
.my-case {
  .el-dialog__body {
    padding: 0.1px;
    background-color: #f0f2f5;
  }
}
</style>
